<template>
  <div class="pages_content table">
    <el-main>
      <!-- <div class="header_right" @click="showCardNav = !showCardNav">
          <div class="title">搜索</div>
          <div>
            <span v-show="!showCardNav">
              <i style="margin-right: 5px;" class="el-icon-arrow-down"></i>
            </span>
            <span v-show="showCardNav">
              <i style="margin-right: 5px;" class="el-icon-arrow-up"></i>
            </span>
          </div>
        </div> -->
      <div v-show="showCardNav" class="hr"></div>
      <el-collapse-transition>
        <div v-show="showCardNav">
          <div class="search">
            <span style="display: inline-block; margin-bottom: 10px">
              <span style="margin-right: 12px">订单编号</span>
              <el-input
                v-model="tableParam.orderNo"
                style="width: 220px"
                placeholder="请输入"
                clearable
                @keyup.enter.native="gettableData()"
              />
            </span>
            <span style="margin-left: 24px">
              <span style="margin-right: 12px">工程名称</span>
              <el-input
                v-model="tableParam.engineeringName"
                style="width: 220px"
                placeholder="请输入"
                clearable
                @keyup.enter.native="gettableData()"
              />
            </span>
            <el-button
              icon="el-icon-search"
              size="medium"
              class="bottom_all but1"
              @click="(tableParam.page = 1), gettableData()"
              >查 询</el-button
            >
            <el-button
              size="medium"
              class="bottom_all_two"
              style="margin-left: 12px"
              @click="init()"
              >重 置</el-button
            >
          </div>
        </div>
      </el-collapse-transition>
      <div class="hr"></div>
      <div class="card">
        <div v-loading="tableLoading" class="card_info">
          <el-table
            :header-cell-style="{ background: '#f3f6f9' }"
            :cell-style="{ borderRight: 'none' }"
            border
            stripe
            style="width: 100%"
            :data="tableData"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
          >
            <template v-for="(item, index2) in table">
              <el-table-column
                v-if="item.status"
                :key="index2"
                :label="item.label"
                align="center"
                :min-width="item.width"
                :fixed="item.label == '生产调整' ? 'right' : false"
              >
                <template slot-scope="scope">
                  <div v-if="item.label == '订单编号'">
                    <el-link
                      class="table_link"
                      :underline="false"
                      @click="lookFun(scope.row)"
                      >{{ scope.row.orderNo }}</el-link
                    >
                  </div>
                  <div v-else-if="item.label == '浇筑方式'">
                    <div>
                      {{ scope.row.pouringMethod | pouringMethodFilter }}
                    </div>
                  </div>
                  <div v-else-if="item.label == '安排运输'">
                    <el-link
                      class="table_link"
                      :underline="false"
                      @click="ToViewFun3(scope.row, scope.$index)"
                      >选择</el-link
                    >
                  </div>
                  <div v-else-if="item.prop == 'approvalStatus'">
                    {{
                      ["", "待审核", "已通过", "未通过", "已取消", "审核中"][
                        scope.row.approvalStatus
                      ]
                    }}
                  </div>
                  <div v-else-if="item.prop == 'isNotice'">
                    {{ scope.row.isNotice == 1 ? "是" : "否" }}
                  </div>
                  <span v-else>{{ scope.row[item.prop] }}</span>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </div>
      </div>
    </el-main>
    <div class="card_bottom">
      <div class="card_bottom_left">
        <div class="top_page_totle">总共{{ total }}条</div>
        <el-pagination
          :current-page.sync="tableParam.page"
          :page-size="tableParam.pageSize"
          :page-sizes="[10, 20, 30, 40, 50, 100, 200, 500, 1000]"
          layout="prev,pager,sizes,next,jumper"
          :total="total"
          @size-change="sizeChange"
          @current-change="gettableData()"
        ></el-pagination>
      </div>
      <div>
        <el-button
          size="mini"
          icon="el-icon-refresh-right"
          class="bottom_all_two"
          @click="gettableData"
          >刷新</el-button
        >
      </div>
    </div>
    <!-- 查看详情 -->
    <el-dialog
      v-dialogDrag
      :visible.sync="lookType"
      width="1000px"
      :close-on-click-modal="false"
    >
      <span slot="title" class="dialog-title">订单基本信息</span>
      <div class="dialoginfo">
        <div class="form-title" style="margin-bottom: 10px">
          订单号：{{ formData4.orderNo }}
        </div>
        <el-form :inline="true" :model="formData4" label-width="100px">
          <el-form-item>
            <span slot="label">工程名称：</span>
            <div style="width: 190px">{{ formData4.engineeringName }}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">浇筑部位：</span>
            <div style="width: 190px">{{ formData4.structuralParts }}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">下单时间：</span>
            <div style="width: 190px">{{ formData4.createTime }}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">订单提交人：</span>
            <div style="width: 190px">{{ formData4.createUserName }}</div>
          </el-form-item>
          <el-form-item prop="person">
            <span slot="label">联系人：</span>
            <div style="width: 190px">{{ formData4.person }}</div>
          </el-form-item>
          <el-form-item prop="phoneNum">
            <span slot="label">联系电话：</span>
            <div style="width: 190px">{{ formData4.phoneNum }}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">强度等级：</span>
            <div style="width: 190px">{{ formData4.strengthGrade }}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">性能等级：</span>
            <div style="width: 190px">{{ formData4.performanceGrade }}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">材料等级：</span>
            <div style="width: 190px">{{ formData4.meterialRequirements }}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">特殊要求：</span>
            <div style="width: 190px">{{ formData4.specialRequirements }}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">其他要求：</span>
            <div style="width: 190px">{{ formData4.otherRequirements }}</div>
          </el-form-item>
          <el-form-item prop="pouringMethod">
            <span slot="label">浇筑方式：</span>
            <div style="width: 190px">
              {{ formData4.pouringMethod | pouringMethodFilter }}
            </div>
          </el-form-item>
          <el-form-item prop="pouringTime">
            <span slot="label">浇筑时间：</span>
            <div style="width: 190px">{{ formData4.pouringTime }}</div>
          </el-form-item>
          <el-form-item prop="pouringHigh">
            <span slot="label">泵送高度：</span>
            <div style="width: 190px">{{ formData4.pouringHigh }}</div>
          </el-form-item>
          <div>
            <el-form-item label-width="150px">
              <span slot="label">客户备注：</span>
              <div style="width: 100%">{{ formData4.remark }}</div>
            </el-form-item>
          </div>
          <div>
            <el-form-item>
              <span slot="label">备注：</span>
              <div style="width: 100%">{{ formData4.orderRemark }}</div>
            </el-form-item>
          </div>
          <div class="hr" style="margin: 20px"></div>
          <el-form-item prop="graphicNum">
            <span slot="label">产品名称：</span>
            <div style="width: 190px">{{ formData4.productName }}</div>
          </el-form-item>
          <el-form-item prop="noteName">
            <span slot="label">票单名称：</span>
            <div style="width: 190px">{{ formData4.noteName }}</div>
          </el-form-item>
          <el-form-item prop="pointId">
            <span slot="label">供应站点：</span>
            <div style="width: 190px">{{ formData4.point }}</div>
          </el-form-item>
          <el-form-item prop="settleId">
            <span slot="label">结算方式：</span>
            <div style="width: 190px">{{ formData4.settleName }}</div>
          </el-form-item>
          <el-form-item prop="firstSupplyId">
            <span slot="label">富余量：</span>
            <div style="width: 190px">{{ formData4.lossNum }}</div>
          </el-form-item>
          <el-form-item prop="firstSupplyId">
            <span slot="label">前场工长：</span>
            <div style="width: 190px">{{ formData4.foreman }}</div>
          </el-form-item>
          <el-form-item v-show="remarkList.length > 0">
            <span slot="label">历史备注</span>
            <div v-for="(v, k) in remarkList" :key="k">{{ v.planRemark }}</div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="lookType = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
    <!-- 选择表格 -->
    <el-dialog
      v-dialogDrag
      :visible.sync="chooseType"
      width="1000px"
      :close-on-click-modal="false"
    >
      <span slot="title" class="dialog-title">选择罐车合同</span>
      <div class="dialoginfo">
        <div>
          <el-table
            ref="multipleTable"
            :header-cell-style="{ background: '#f3f6f9' }"
            :cell-style="{ borderRight: 'none' }"
            border
            stripe
            style="width: 100%"
            :data="toViewList2"
            tooltip-effect="dark"
          >
            <el-table-column width="55">
              <template slot-scope="scope">
                <el-radio
                  v-model="radio"
                  :label="scope.row"
                  @change="radioFun(scope.row)"
                  >{{ "" }}</el-radio
                >
              </template>
            </el-table-column>
            <el-table-column
              label="合同编号"
              align="center"
              prop="contractNumber"
            ></el-table-column>
            <el-table-column
              label="合同单位"
              align="center"
              prop="supplierName"
            ></el-table-column>
            <el-table-column
              label="合同等级"
              align="center"
              prop="cooperationClass"
            ></el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="chooseType = false"
          >关 闭</el-button
        >
        <el-button class="bottom_all" @click="radioAddFun()">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import { queryPage, plansaveArrange } from "@/api/smart/schedul/outsourcing.js";
import { planRemark } from "@/api/smart/schedul/c.js";
import {
  getContractVoList,
  plan_detail,
  operation_detail,
} from "@/api/smart/schedul/d.js";
export default {
  mixins: [mixin],
  data() {
    return {
      queryPage: queryPage,
      toViewList2: [],
      remarkList: [],
      formData4: {},
      lookType: false,
      chooseType: false,
      tableData: [],
      table: [
        {
          label: "订单编号",
          width: "220",
          prop: "orderNo",
          status: true,
        },
        {
          label: "浇筑时间",
          width: "160",
          prop: "pouringTime",
          status: true,
        },
        {
          label: "产品名称",
          width: "160",
          prop: "productName",
          status: true,
        },
        {
          label: "计划生产量（方）",
          width: "140",
          prop: "pouringNum",
          status: true,
        },
        {
          label: "浇筑方式",
          width: "120",
          prop: "",
          status: true,
        },
        {
          label: "工程名称",
          width: "160",
          prop: "engineeringName",
          status: true,
        },
        {
          label: "工程地址",
          width: "160",
          prop: "place",
          status: true,
        },
        {
          label: "安排运输",
          width: "120",
          prop: "",
          status: true,
        },
        {
          label: "运输队",
          width: "120",
          prop: "tankUnit",
          status: true,
        },
        {
          label: "是否我方运输",
          width: "120",
          prop: "isNotice",
          status: true,
        },
        {
          label: "审核状态",
          width: "120",
          prop: "approvalStatus",
          status: true,
        },
      ],
      radio: "",
      indexRow: "",
    };
  },
  async created() {
    this.gettableData();
  },
  methods: {
    lookFun(e) {
      this.lookType = true;
      /**历史备注 */
      planRemark({ planId: e.id }).then((res) => {
        this.remarkList = res.data;
      });
      plan_detail({ id: e.id }).then((res) => {
        //获取订单信息
        this.formData4 = res.data;
        if (this.formData4.performanceGrade) {
          this.formData4.performanceGrade = JSON.parse(
            this.formData4.performanceGrade
          ).map((v) => {
            return v.name;
          });
          this.formData4.performanceGrade =
            this.formData4.performanceGrade.join(",");
        } else {
          this.formData4.performanceGrade = "";
        }
        if (this.formData4.meterialRequirements) {
          this.formData4.meterialRequirements = JSON.parse(
            this.formData4.meterialRequirements
          ).map((v) => {
            return v.name;
          });
          this.formData4.meterialRequirements =
            this.formData4.meterialRequirements.join(",");
        } else {
          this.formData4.meterialRequirements = "";
        }
        if (this.formData4.specialRequirements) {
          this.formData4.specialRequirements = JSON.parse(
            this.formData4.specialRequirements
          ).map((v) => {
            return v.name;
          });
          this.formData4.specialRequirements =
            this.formData4.specialRequirements.join(",");
        } else {
          this.formData4.specialRequirements = "";
        }
        if (this.formData4.otherRequirements) {
          this.formData4.otherRequirements = JSON.parse(
            this.formData4.otherRequirements
          ).map((v) => {
            return v.name;
          });
          this.formData4.otherRequirements =
            this.formData4.otherRequirements.join(",");
        } else {
          this.formData4.otherRequirements = "";
        }
        operation_detail({
          //获取作业安排信息
          planId: e.id,
          enginnerId: e.engineeringId,
        }).then((res2) => {
          let obj = {
            point: res2.data.pointName,
            settle: "",
            lossNumId: res2.data.lossNumId,
            remark2: res2.data.remark,
            settleName: res2.data.settleName,
            settleId: res2.data.settleId,
            lossNum: res2.data.lossNum,
            foreman: res2.data.foreman,
          };
          this.formData4 = { ...this.formData4, ...obj };
        });
      });
    },
    init() {
      /*重置数据*/
      this.$data.tableParam = this.$options.data().tableParam;
      this.tableParam.orderNo = "";
      this.tableParam.engineeringName = "";
      this.gettableData();
    },
    //运输弹出列表
    async ToViewFun3(row) {
      this.chooseType = true;
      this.indexRow = row;
      this.radio = {};
      let id = "";
      this.ToViewFun3Name = "选择罐车合同";
      await getContractVoList({
        stationId: row.stationId,
        contractTypeId: 2,
      }).then((res) => {
        this.toViewList2 = res.data;
      });
      id = row.transContractNo;
      this.toViewList2.forEach((v) => {
        if (v.contractNumber == id) {
          this.radio = v;
          console.log(this.radio);
        }
      });
    },
    radioFun(res) {
      this.radio = res;
    },
    radioAddFun() {
      let json = {
        planId: this.indexRow.id, // 计划id
        contractNo: this.radio.contractNumber, // 合同编号
        tankUnit: this.radio.supplierName, // 运输单位
        tankUnitId: this.radio.supplierId, // 运输单位id
      };
      plansaveArrange(json).then((res) => {
        if (res.code == 1001) {
          this.chooseType = false;
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.gettableData();
        }
      });
    },
    sizeChange(value) {
      this.tableParam.pageSize = value;
      this.gettableData();
    },
  },
  filters: {
    pouringMethodFilter(e) {
      if (e) {
        e = JSON.parse(e);
        let table = e.map((res) => res.name);
        let text = table.join("、");
        return text;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.table_link {
  margin: 0 10px;
  color: $bg_color;
}

.table_link:hover {
  opacity: 0.8;
}
.pages_content {
  overflow: scroll;
}
</style>
